<template>
  <div class="common-layout">
    <el-container>
      <el-container>
        <el-aside width="200px"><NavMenu></NavMenu></el-aside>
        <el-container>
          <el-header height="40px"><Header></Header></el-header>
            <br>
          <el-main>
            <div class="tool-nav">
              <el-button type="primary" style="float: left;" class="add" @click="addclient">添加客户</el-button>
              <el-input v-model="search" size="big" style="width: 200px;" class="in" placeholder="请输入客户名称" />
              <el-button type="primary" style="margin-left: 10px;" @click="searchclient">搜索</el-button>
              <el-button @click="refresh()"><el-icon class="icon-button"><refresh-right /></el-icon><p>刷新</p></el-button>
            </div>
              <el-table :data="tableData" stripe style="width: 100%;margin-top: 30px;" v-loading="loading">
<!--                <el-table-column type="selection" width="55" align="center"/>-->
                <el-table-column prop="cid" label="客户编号" sortable align="center" />
                <el-table-column prop="cname" label="客户名称" align="center" />
                <el-table-column prop="caddress" label="客户地址" width="350px" align="center" />
                <el-table-column prop="cphone" label="联系方式" width="260px" align="center" />
                <el-table-column prop="num" label="水票数量" align="center" />
                <el-table-column label="操&nbsp;作" >
                  <template #default="scope">
                  <edit class="edit" @click="editclient(scope.row)"/>
                  <delete class="del" @click="delclient(scope.row)"/>
                  </template>
                </el-table-column>
              </el-table>
              <div>
                <AddClient ref="msg1" @updateData="updateData"/>
                <EditClient ref="msg2" @updateData="updateData"/>
              </div>
              <br>
              <el-footer>
                <!--分页-->
                <el-pagination
                        background :disabled = "disablePage"
                        v-model:current-page="currentPage" 
                        small layout="prev, pager, next"
                        :page-size="pageSize"
                        :total="total"
                        @current-change="getAllCustomer"/>
              </el-footer>
          </el-main>
        </el-container>
      </el-container>
    </el-container>
</div>
</template>

<script>

import NavMenu from '@/components/NavMenu.vue'
import Header from '@/components/Header.vue'
import AddClient from "@/components/AddClient"
import EditClient from "@/components/EditClient"
export default {
  name: 'HomeView',
  components: {
    // eslint-disable-next-line vue/no-unused-components
    NavMenu,
    Header,
    AddClient,
    EditClient,
},
  data(){
    return {
      tableData: [],
      search:'',
      total:0,
      pageSize:8,
      currentPage: '1',
      loading:true,
      disablePage: false
    }
  },
  updateData() {
    this.loading = true;
    this.getAllCustomer();
  },
  created(){
      var that = this;
    this.axios
            .post("http://localhost:8080/customer/page?page="+this.currentPage)
            .then(function (response) {
                that.tableData = response;
            }).catch(function (error) {
              console.log(error);
            });
    this.axios
            .post("http://localhost:8080/customer/rows")
            .then(function (response) {
                that.total = response;
                console.log("11111----"+that.total);
            }).catch(function (error) {
              console.log(error);
        console.log("11111----"+that.total);
            });
  },
  mounted(){
    this.getAllCustomer();
  },
  methods: {
    //加载全部顾客信息
    getAllCustomer() {
      var that = this;
        console.log('当前页:${}'+this.currentPage);
        console.log("33333----"+this.total);
      let page=this.currentPage;
      this.axios
              // .post("http://localhost:8080/customer/findAll")
              .post("http://localhost:8080/customer/page?page="+page)
              .then(function (response) {
                that.tableData = response;
                // that.total = response.total;
                that.loading = false;
                // console.log(JSON.stringify(response));
              })
              .catch(function (error) {
                console.log(error);
                alert("暂无数据！")
              });
    },
    //获取页码
    getPages(){
        var that = this;
      this.axios
              .post("http://localhost:8080/customer/rows")
              .then(function (response) {
                that.total=response;
                  console.log("22222----"+that.total);
              })
              .catch(function (error) {
                console.log(error);
              });
    },
    addclient() {  //添加顾客弹窗
      var that = this;
      that.$refs.msg1.init();
    },
    searchclient() {  //查找顾客
      this.loading = true;
      var that = this;
      let cname = this.search;
      if (cname != null) {
        this.axios
                .get("http://localhost:8080/customer/selectCustomer?cname=" + cname + "")
                .then(function (response) {
                  that.tableData = response;
                  that.disablePage = true;
                  that.loading = false;
                })
                .catch(function (error) {
                  console.log(error);
                });
      }
    },
    //刷新
    refresh() {
        location.reload();
      // this.loading = true;
      // this.getAllCustomer();
    },
    editclient(row) {  //编辑顾客弹窗
      var that = this;
      that.$refs.msg2.init(row.cid);
    },
    updateData() {
      this.loading = true;
      this.getAllCustomer();
    },
    delclient(row) {  //删除顾客
      let that = this;
      console.log(row);
      this.$confirm('删除操作，是否继续？', '提示', {
        confirmButtonText: '确定',
        concelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true;
        this.axios
                .post("http://localhost:8080/customer/delCustomer?cid=" + row.cid + "")
                .then(function (response) {
                  console.log(response + "删除成功");
                  that.getAllCustomer();
                })
                .then(function (response) {
                  this.getPages();
                  this.currentPage=1;
                  this.axios
                          .post("http://localhost:8080/customer/page?page=" + this.currentPage)
                })
                .catch(function (error) {
                  console.log(error);
                });
        this.$message({
          type: 'success',
          message: '删除成功！'
        });
        console.log(response);
      }).catch(function (error) {
        console.log(error);
      }).catch(function () {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }
  },
}
</script>

<style scoped>
.el-header /deep/ { 
  padding: 0;
}
.el-main /deep/{
  height: 300px;
}
.tool-nav{
  display: flex;
  justify-content: left;
  margin-bottom: 20px;
}
.edit{
  width: 1.2em;
  height: 1.2em;
  color: #1E90FF;
  margin-top: 3px;
  margin-right: 4px;
  margin-left: 4px;
  cursor:pointer;
}
.del{
  width: 1.2em;
  height: 1.2em;
  color: #ed1941;
  margin-top: 3px;
  cursor:pointer;
}
.add{
  margin-left: 20px;
}
.in{
  margin-left: 500px;
}
.el-pagination{
  justify-content: center;
}
</style>
